<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图书馆借阅系统</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }
        
        :root {
            --primary: #3498db;
            --secondary: #2c3e50;
            --accent: #e74c3c;
            --light: #ecf0f1;
            --dark: #34495e;
            --success: #2ecc71;
            --warning: #f39c12;
        }
        
        body {
            background-color: #f5f7fa;
            color: #333;
            line-height: 1.6;
        }
        
        header {
            background: linear-gradient(135deg, var(--secondary), var(--dark));
            color: white;
            padding: 1.2rem 0;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
            position: sticky;
            top: 0;
            z-index: 100;
        }
        
        .container {
            width: 90%;
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 15px;
        }
        
        .header-content {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .logo {
            display: flex;
            align-items: center;
            gap: 10px;
        }
        
        .logo i {
            font-size: 1.8rem;
            color: var(--primary);
        }
        
        .logo-text {
            font-size: 1.5rem;
            font-weight: 700;
        }
        
        .logo-text span {
            color: var(--primary);
        }
        
        nav ul {
            display: flex;
            list-style: none;
            gap: 1.5rem;
        }
        
        nav a {
            color: white;
            text-decoration: none;
            font-size: 1.1rem;
            font-weight: 500;
            transition: color 0.3s;
            padding: 0.5rem 0.8rem;
            border-radius: 4px;
        }
        
        nav a:hover, nav a.active {
            background: rgba(255, 255, 255, 0.15);
        }
        
        .search-container {
            background: white;
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
            margin: 20px auto 30px;
            max-width: 800px;
        }
        
        .search-box {
            display: flex;
            background: white;
            border-radius: 50px;
            overflow: hidden;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
        }
        
        .search-box input {
            flex: 1;
            border: none;
            outline: none;
            padding: 15px 20px;
            font-size: 1.1rem;
            background: #f9f9f9;
        }
        
        .search-box button {
            background: var(--primary);
            color: white;
            border: none;
            padding: 0 30px;
            font-size: 1.1rem;
            font-weight: 600;
            cursor: pointer;
            transition: background 0.3s;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        
        .search-box button:hover {
            background: #2980b9;
        }
        
        .section-title {
            text-align: center;
            margin-bottom: 2.5rem;
            position: relative;
        }
        
        .section-title h2 {
            font-size: 2.2rem;
            color: var(--secondary);
            display: inline-block;
            padding-bottom: 10px;
        }
        
        .section-title h2::after {
            content: '';
            position: absolute;
            width: 80px;
            height: 4px;
            background: var(--primary);
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            border-radius: 2px;
        }
        
        .books-container {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
            gap: 25px;
            margin: 2rem 0;
        }
        
        .book-card {
            background: white;
            border-radius: 10px;
            overflow: hidden;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
            transition: transform 0.3s, box-shadow 0.3s;
            position: relative;
        }
        
        .book-card:hover {
            transform: translateY(-8px);
            box-shadow: 0 12px 25px rgba(0, 0, 0, 0.15);
        }
        
        .book-cover {
            height: 280px;
            background: var(--light);
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            overflow: hidden;
        }
        
        .book-cover img {
            max-width: 75%;
            max-height: 75%;
            object-fit: cover;
            transition: transform 0.3s;
        }
        
        .book-card:hover .book-cover img {
            transform: scale(1.05);
        }
        
        .book-info {
            padding: 20px;
        }
        
        .book-title {
            font-size: 1.3rem;
            margin-bottom: 8px;
            color: var(--secondary);
            height: 3.2rem;
            overflow: hidden;
        }
        
        .book-author {
            color: #7f8c8d;
            margin-bottom: 15px;
            font-style: italic;
        }
        
        .book-meta {
            display: flex;
            justify-content: space-between;
            margin-bottom: 20px;
            color: var(--dark);
            font-size: 0.95rem;
        }
        
        .book-status {
            font-weight: 600;
            padding: 4px 12px;
            border-radius: 20px;
            font-size: 0.9rem;
        }
        
        .available {
            background: rgba(46, 204, 113, 0.2);
            color: var(--success);
        }
        
        .borrowed {
            background: rgba(231, 76, 60, 0.2);
            color: var(--accent);
        }
        
        .action-btn {
            display: block;
            width: 100%;
            padding: 10px;
            border: none;
            border-radius: 5px;
            font-size: 1.05rem;
            font-weight: 600;
            cursor: pointer;
            transition: background 0.3s;
            text-align: center;
        }
        
        .borrow-btn {
            background: var(--primary);
            color: white;
        }
        
        .borrow-btn:hover {
            background: #2980b9;
        }
        
        .borrow-form {
            background: white;
            border-radius: 10px;
            padding: 30px;
            box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
            max-width: 600px;
            margin: 30px auto;
        }
        
        .form-group {
            margin-bottom: 20px;
        }
        
        .form-group label {
            display: block;
            margin-bottom: 8px;
            font-weight: 600;
            color: var(--dark);
        }
        
        .form-group input,
        .form-group select {
            width: 100%;
            padding: 12px 15px;
            border: 1px solid #ddd;
            border-radius: 5px;
            font-size: 1rem;
            transition: border 0.3s;
            background: #f9f9f9;
        }
        
        .form-group input:focus,
        .form-group select:focus {
            border-color: var(--primary);
            outline: none;
            background: white;
        }
        
        .submit-btn {
            background: var(--primary);
            color: white;
            border: none;
            padding: 14px;
            border-radius: 5px;
            font-size: 1.1rem;
            font-weight: 600;
            cursor: pointer;
            width: 100%;
            transition: background 0.3s;
            margin-top: 10px;
        }
        
        .submit-btn:hover {
            background: #2980b9;
        }
        
        .tabs {
            display: flex;
            justify-content: center;
            margin-bottom: 30px;
            border-bottom: 1px solid #ddd;
            flex-wrap: wrap;
        }
        
        .tab-btn {
            padding: 12px 30px;
            background: none;
            border: none;
            font-size: 1.1rem;
            font-weight: 600;
            color: var(--dark);
            cursor: pointer;
            position: relative;
            transition: color 0.3s;
        }
        
        .tab-btn.active {
            color: var(--primary);
        }
        
        .tab-btn.active::after {
            content: '';
            position: absolute;
            bottom: -1px;
            left: 0;
            width: 100%;
            height: 3px;
            background: var(--primary);
        }
        
        .tab-content {
            display: none;
        }
        
        .tab-content.active {
            display: block;
        }
        
        .borrowed-books {
            background: white;
            border-radius: 10px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
            padding: 20px;
            margin-top: 20px;
        }
        
        .borrowed-books h3 {
            font-size: 1.3rem;
            color: var(--secondary);
            margin-bottom: 15px;
            padding-bottom: 10px;
            border-bottom: 1px solid #eee;
        }
        
        .book-item {
            display: flex;
            align-items: center;
            padding: 20px;
            border-bottom: 1px solid #eee;
            transition: background 0.2s;
        }
        
        .book-item:hover {
            background: #f9f9f9;
        }
        
        .book-item:last-child {
            border-bottom: none;
        }
        
        .book-item-img {
            width: 70px;
            height: 100px;
            background: var(--light);
            margin-right: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 5px;
            flex-shrink: 0;
        }
        
        .book-item-img img {
            max-width: 90%;
            max-height: 90%;
            object-fit: cover;
        }
        
        .book-item-details {
            flex: 1;
        }
        
        .book-item-title {
            font-size: 1.15rem;
            font-weight: 600;
            margin-bottom: 5px;
            color: var(--secondary);
        }
        
        .book-item-meta {
            display: flex;
            gap: 20px;
            color: #7f8c8d;
            margin-bottom: 10px;
            font-size: 0.9rem;
            flex-wrap: wrap;
        }
        
        .due-date {
            color: var(--accent);
            font-weight: 600;
        }
        
        .return-action {
            background: var(--success);
            color: white;
            border: none;
            padding: 8px 15px;
            border-radius: 4px;
            cursor: pointer;
            font-weight: 500;
            transition: background 0.3s;
            font-size: 0.95rem;
        }
        
        .return-action:hover {
            background: #27ae60;
        }
        
        .empty-state {
            text-align: center;
            padding: 50px 20px;
            color: #7f8c8d;
        }
        
        .empty-state i {
            font-size: 4rem;
            margin-bottom: 20px;
            color: #bdc3c7;
        }
        
        .empty-state h3 {
            font-size: 1.5rem;
            margin-bottom: 15px;
            color: var(--dark);
        }
        
        footer {
            background: var(--secondary);
            color: white;
            padding: 2rem 0;
            margin-top: 4rem;
            text-align: center;
        }
        
        .copyright {
            padding-top: 15px;
            color: #bdc3c7;
            font-size: 0.95rem;
        }
        
        @media (max-width: 768px) {
            .header-content {
                flex-direction: column;
                gap: 15px;
            }
            
            nav ul {
                gap: 0.8rem;
                flex-wrap: wrap;
                justify-content: center;
            }
            
            .section-title h2 {
                font-size: 1.8rem;
            }
            
            .books-container {
                grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
            }
            
            .book-cover {
                height: 240px;
            }
            
            .tabs {
                flex-direction: column;
                align-items: center;
            }
            
            .tab-btn {
                width: 100%;
                text-align: center;
                padding: 15px;
            }
        }
        
        @media (max-width: 480px) {
            .search-box {
                flex-direction: column;
                border-radius: 10px;
            }
            
            .search-box input {
                border-radius: 0;
                padding: 12px 15px;
            }
            
            .search-box button {
                padding: 12px;
                border-radius: 0 0 10px 10px;
                justify-content: center;
            }
            
            .book-item {
                flex-direction: column;
                align-items: flex-start;
            }
            
            .book-item-img {
                margin-bottom: 15px;
            }
            
            .book-item-meta {
                gap: 10px;
            }
        }
    </style>
</head>
<body>
    <!-- 顶部导航 -->
    <header>
        <div class="container">
            <div class="header-content">
                <div class="logo">
                    <i class="fas fa-book-open"></i>
                    <div class="logo-text">图书馆<span>借阅系统</span></div>
                </div>
                <nav>
                    <ul>
                        <li><a href="#" class="active" onclick="switchTab('books')">图书浏览</a></li>
                        <li><a href="#" onclick="switchTab('borrow')">借阅图书</a></li>
                        <li><a href="#" onclick="switchTab('records')">我的借阅</a></li>
                    </ul>
                </nav>
            </div>
        </div>
    </header>

    <!-- 主要内容区域 -->
    <main class="container">
        <!-- 搜索框 -->
        <div class="search-container">
            <div class="search-box">
                <input type="text" id="search-input" placeholder="搜索书名、作者或关键词...">
                <button onclick="searchBooks()">
                    <i class="fas fa-search"></i> 搜索图书
                </button>
            </div>
        </div>

        <div class="tabs">
            <button class="tab-btn active" onclick="switchTab('books')">图书浏览</button>
            <button class="tab-btn" onclick="switchTab('borrow')">借阅图书</button>
            <button class="tab-btn" onclick="switchTab('records')">我的借阅</button>
        </div>

        <!-- 图书浏览 -->
        <div id="books" class="tab-content active">
            <div class="section-title">
                <h2>图书馆藏书</h2>
            </div>
            
            <div class="books-container" id="books-container">
                <!-- 图书卡片1 -->
                <div class="book-card">
                    <div class="book-cover">
                        <img src="https://img.alicdn.com/i1/2468631159/O1CN01jKOd111KQrlAM7DpV_!!0-item_pic.jpg" alt="高等数学">
                    </div>
                    <div class="book-info">
                        <h3 class="book-title">高等数学</h3>
                        <p class="book-author">张天德</p>
                        <div class="book-meta">
                            <span>教育</span>
                            <span class="book-status available">可借阅</span>
                        </div>
                        <button class="action-btn borrow-btn" data-title="高等数学" data-author="张天德">
                            <i class="fas fa-bookmark"></i> 借阅图书
                        </button>
                    </div>
                </div>
                
                <!-- 图书卡片2 -->
                <div class="book-card">
                    <div class="book-cover">
                        <img src="https://m.media-amazon.com/images/I/71X1p4TGlxL._AC_UF1000,1000_QL80_.jpg" alt="三体">
                    </div>
                    <div class="book-info">
                        <h3 class="book-title">三体</h3>
                        <p class="book-author">刘慈欣</p>
                        <div class="book-meta">
                            <span>科幻小说</span>
                            <span class="book-status available">可借阅</span>
                        </div>
                        <button class="action-btn borrow-btn" data-title="三体" data-author="刘慈欣">
                            <i class="fas fa-bookmark"></i> 借阅图书
                        </button>
                    </div>
                </div>

                <!-- 图书卡片3 -->
                <div class="book-card">
                    <div class="book-cover">
                        <img src="https://m.media-amazon.com/images/I/51cP9Z0R%2BLL._AC_UF1000,1000_QL80_.jpg" alt="原则">
                    </div>
                    <div class="book-info">
                        <h3 class="book-title">原则</h3>
                        <p class="book-author">瑞·达利欧</p>
                        <div class="book-meta">
                            <span>自我提升</span>
                            <span class="book-status available">可借阅</span>
                        </div>
                        <button class="action-btn borrow-btn" data-title="原则" data-author="瑞·达利欧">
                            <i class="fas fa-bookmark"></i> 借阅图书
                        </button>
                    </div>
                </div>
                
                <!-- 图书卡片4 -->
                <div class="book-card">
                    <div class="book-cover">
                        <img src="https://m.media-amazon.com/images/I/81wTbnzrJPL._AC_UF1000,1000_QL80_.jpg" alt="人类简史">
                    </div>
                    <div class="book-info">
                        <h3 class="book-title">人类简史</h3>
                        <p class="book-author">尤瓦尔·赫拉利</p>
                        <div class="book-meta">
                            <span>历史哲学</span>
                            <span class="book-status available">可借阅</span>
                        </div>
                        <button class="action-btn borrow-btn" data-title="人类简史" data-author="尤瓦尔·赫拉利">
                            <i class="fas fa-bookmark"></i> 借阅图书
                        </button>
                    </div>
                </div>
            </div>
        </div>

        <!-- 借阅表单 -->
        <div id="borrow" class="tab-content">
            <div class="section-title">
                <h2>借阅图书</h2>
            </div>
            
            <div class="borrow-form">
                <div class="form-group">
                    <label for="book-select">选择图书</label>
                    <select id="book-select">
                        <option value="">-- 请选择要借阅的图书 --</option>
                        <option value="百年孤独">百年孤独 - 加西亚·马尔克斯</option>
                        <option value="三体">三体 - 刘慈欣</option>
                        <option value="原则">原则 - 瑞·达利欧</option>
                        <option value="人类简史">人类简史 - 尤瓦尔·赫拉利</option>
                    </select>
                </div>
                
                <div class="form-group">
                    <label for="borrower-name">借阅人姓名</label>
                    <input type="text" id="borrower-name" placeholder="请输入您的姓名">
                </div>
                
                <div class="form-group">
                    <label for="borrower-id">借阅证号</label>
                    <input type="text" id="borrower-id" placeholder="请输入借阅证号">
                </div>
                
                <div class="form-group">
                    <label for="borrow-date">借阅日期</label>
                    <input type="date" id="borrow-date">
                </div>
                
                <div class="form-group">
                    <label for="return-date">预计归还日期</label>
                    <input type="date" id="return-date">
                </div>
                
                <button class="submit-btn" onclick="submitBorrowForm()">
                    <i class="fas fa-check-circle"></i> 确认借阅
                </button>
            </div>
        </div>

        <!-- 借阅记录 -->
        <div id="records" class="tab-content">
            <div class="section-title">
                <h2>我的借阅记录</h2>
            </div>
            
            <div class="borrowed-books" id="borrowed-books">
                <h3>当前借阅中</h3>
                <div id="borrowed-books-list">
                    <!-- 借阅记录将在这里动态添加 -->
                    <div class="empty-state" id="empty-borrowed">
                        <i class="fas fa-book-open"></i>
                        <h3>暂无借阅记录</h3>
                        <p>您还没有借阅任何图书，快去浏览并借阅喜欢的图书吧！</p>
                    </div>
                </div>
            </div>
        </div>
    </main>

    <!-- 页脚 -->
    <footer>
        <div class="container">
            <div class="copyright">
                <p>&copy; 2025 图书馆借阅系统 | 致力于提供便捷的图书借阅服务</p>
            </div>
        </div>
    </footer>

    <script>
        // 全局变量存储借阅记录
        let borrowedBooks = [];
        
        // 切换标签页功能
        function switchTab(tabId) {
            // 隐藏所有标签内容
            document.querySelectorAll('.tab-content').forEach(tab => {
                tab.classList.remove('active');
            });
            
            // 移除所有标签按钮的active类
            document.querySelectorAll('.tab-btn').forEach(btn => {
                btn.classList.remove('active');
            });
            
            // 更新导航栏活动状态
            document.querySelectorAll('nav a').forEach(link => {
                link.classList.remove('active');
            });
            
            // 设置当前导航项为活动状态
            const currentNavItem = Array.from(document.querySelectorAll('nav a')).find(
                link => link.getAttribute('onclick') === `switchTab('${tabId}')`
            );
            if (currentNavItem) {
                currentNavItem.classList.add('active');
            }
            
            // 显示选中的标签内容
            document.getElementById(tabId).classList.add('active');
            
            // 为当前标签按钮添加active类
            const currentTabBtn = Array.from(document.querySelectorAll('.tab-btn')).find(
                btn => btn.getAttribute('onclick') === `switchTab('${tabId}')`
            );
            if (currentTabBtn) {
                currentTabBtn.classList.add('active');
            }
            
            // 如果切换到借阅记录，更新显示
            if (tabId === 'records') {
                updateBorrowedBooksDisplay();
            }
        }
        
        // 初始化日期
        function initDates() {
            // 设置借阅日期为今天
            const today = new Date().toISOString().split('T')[0];
            document.getElementById('borrow-date').value = today;
            
            // 设置归还日期为14天后
            const returnDate = new Date();
            returnDate.setDate(returnDate.getDate() + 14);
            const returnDateFormatted = returnDate.toISOString().split('T')[0];
            document.getElementById('return-date').value = returnDateFormatted;
        }
        
        // 借阅图书函数
        function borrowBook(bookTitle, bookAuthor) {
            // 切换到借阅标签页
            switchTab('borrow');
            
            // 设置选中的图书
            const bookSelect = document.getElementById('book-select');
            for (let i = 0; i < bookSelect.options.length; i++) {
                if (bookSelect.options[i].text.includes(bookTitle)) {
                    bookSelect.selectedIndex = i;
                    break;
                }
            }
            
            // 显示成功消息
            showNotification(`您已选择借阅《${bookTitle}》，请填写借阅信息`);
        }
        
        // 提交借阅表单
        function submitBorrowForm() {
            const bookSelect = document.getElementById('book-select');
            const borrowerName = document.getElementById('borrower-name');
            const borrowerId = document.getElementById('borrower-id');
            const borrowDate = document.getElementById('borrow-date');
            const returnDate = document.getElementById('return-date');
            
            if (bookSelect.value === '') {
                showNotification('请选择要借阅的图书', 'error');
                return;
            }
            
            if (borrowerName.value.trim() === '') {
                showNotification('请输入借阅人姓名', 'error');
                return;
            }
            
            if (borrowerId.value.trim() === '') {
                showNotification('请输入借阅证号', 'error');
                return;
            }
            
            if (borrowDate.value === '') {
                showNotification('请选择借阅日期', 'error');
                return;
            }
            
            if (returnDate.value === '') {
                showNotification('请选择预计归还日期', 'error');
                return;
            }
            
            // 在实际应用中，这里会发送数据到服务器
            const bookTitle = bookSelect.options[bookSelect.selectedIndex].text.split(' - ')[0];
            const bookAuthor = bookSelect.options[bookSelect.selectedIndex].text.split(' - ')[1];
            
            // 创建借阅记录
            const borrowRecord = {
                title: bookTitle,
                author: bookAuthor,
                borrower: borrowerName.value,
                borrowerId: borrowerId.value,
                borrowDate: borrowDate.value,
                returnDate: returnDate.value,
                status: 'borrowed'
            };
            
            // 添加到全局借阅记录
            borrowedBooks.push(borrowRecord);
            
            // 获取借阅图书的详细信息
            const bookInfo = getBookInfo(bookTitle);

            // 在“我的借阅”中添加借阅记录
            addBorrowedBook(bookInfo, borrowRecord.returnDate);

            // 更新图书状态为已借阅
            updateBookStatus(bookTitle, 'borrowed');

            showNotification(`借阅成功！\n图书：${bookTitle}\n借阅人：${borrowerName.value}`);
            
            // 重置表单
            bookSelect.selectedIndex = 0;
            borrowerName.value = '';
            borrowerId.value = '';
            initDates();
            
            // 切换到借阅记录
            setTimeout(() => switchTab('records'), 1500);
        }
        
        // 归还图书
        function returnBook(button, bookTitle) {
            if (confirm(`确定要归还《${bookTitle}》吗？`)) {
                // 从借阅记录中移除
                borrowedBooks = borrowedBooks.filter(book => book.title !== bookTitle);
                
                // 更新UI
                const bookItem = button.closest('.book-item');
                bookItem.style.opacity = '0';
                bookItem.style.transform = 'translateY(-20px)';
                bookItem.style.transition = 'all 0.3s ease';
                
                setTimeout(() => {
                    if (bookItem.parentNode) {
                        bookItem.parentNode.removeChild(bookItem);
                    }
                    updateEmptyStateVisibility();
                }, 300);
                
                // 更新图书状态为可借阅
                updateBookStatus(bookTitle, 'available');

                showNotification(`《${bookTitle}》已成功归还！`);
            }
        }
        
        // 搜索图书
        function searchBooks() {
            const searchTerm = document.getElementById('search-input').value.trim().toLowerCase();
            const booksContainer = document.getElementById('books-container');
            const bookCards = document.querySelectorAll('.book-card');
            
            if (searchTerm === '') {
                // 显示所有图书
                bookCards.forEach(card => {
                    card.style.display = 'block';
                });
                showNotification('显示所有图书');
                return;
            }
            
            let found = false;
            bookCards.forEach(card => {
                const title = card.querySelector('.book-title').textContent.toLowerCase();
                const author = card.querySelector('.book-author').textContent.toLowerCase();
                
                if (title.includes(searchTerm) || author.includes(searchTerm)) {
                    card.style.display = 'block';
                    found = true;
                } else {
                    card.style.display = 'none';
                }
            });
            
            if (!found) {
                showNotification(`未找到包含"${searchTerm}"的图书`, 'error');
            } else {
                showNotification(`搜索结果：包含"${searchTerm}"的图书`);
            }
        }
        
        // 显示通知
        function showNotification(message, type = 'success') {
            // 移除现有的通知
            const existingNotification = document.querySelector('.notification');
            if (existingNotification) {
                existingNotification.remove();
            }
            
            const notification = document.createElement('div');
            notification.className = `notification ${type}`;
            notification.innerHTML = message;
            notification.style.cssText = `
                position: fixed;
                top: 20px;
                right: 20px;
                padding: 15px 25px;
                border-radius: 5px;
                background: ${type === 'error' ? 'var(--accent)' : 'var(--success)'};
                color: white;
                font-weight: 500;
                box-shadow: 0 5px 15px rgba(0,0,0,0.2);
                z-index: 1000;
                animation: fadeIn 0.3s, fadeOut 0.3s 2.7s;
            `;
            
            document.body.appendChild(notification);
            
            // 3秒后移除通知
            setTimeout(() => {
                if (notification.parentNode) {
                    notification.parentNode.removeChild(notification);
                }
            }, 3000);
        }
        
        // 获取图书详细信息
        function getBookInfo(bookTitle) {
            const bookCards = document.querySelectorAll('.book-card');
            for (let i = 0; i < bookCards.length; i++) {
                const bookTitleElement = bookCards[i].querySelector('.book-title');
                if (bookTitleElement.textContent === bookTitle) {
                    const bookCover = bookCards[i].querySelector('.book-cover img').src;
                    const bookAuthor = bookCards[i].querySelector('.book-author').textContent;
                    return { title: bookTitle, cover: bookCover, author: bookAuthor };
                }
            }
            return null;
        }
        
        // 在“我的借阅”中添加借阅记录
        function addBorrowedBook(bookInfo, dueDate) {
            const borrowedBooksList = document.getElementById('borrowed-books-list');
            const emptyState = document.getElementById('empty-borrowed');
            
            // 隐藏空状态
            if (emptyState) {
                emptyState.style.display = 'none';
            }
            
            const bookItem = document.createElement('div');
            bookItem.className = 'book-item';
            bookItem.innerHTML = `
                <div class="book-item-img">
                    <img src="${bookInfo.cover}" alt="${bookInfo.title}">
                </div>
                <div class="book-item-details">
                    <h3 class="book-item-title">${bookInfo.title}</h3>
                    <div class="book-item-meta">
                        <span>${bookInfo.author}</span>
                        <span class="due-date">应还日期: ${dueDate}</span>
                    </div>
                    <button class="return-action" onclick="returnBook(this, '${bookInfo.title}')">
                        <i class="fas fa-undo"></i> 归还图书
                    </button>
                </div>
            `;
            borrowedBooksList.appendChild(bookItem);
        }
        
        // 更新图书状态
        function updateBookStatus(bookTitle, status) {
            const bookCards = document.querySelectorAll('.book-card');
            for (let i = 0; i < bookCards.length; i++) {
                const bookTitleElement = bookCards[i].querySelector('.book-title');
                if (bookTitleElement.textContent === bookTitle) {
                    const bookStatusElement = bookCards[i].querySelector('.book-status');
                    bookStatusElement.textContent = status === 'borrowed' ? '已借阅' : '可借阅';
                    bookStatusElement.className = `book-status ${status}`;
                    
                    const borrowBtn = bookCards[i].querySelector('.borrow-btn');
                    if (status === 'borrowed') {
                        borrowBtn.disabled = true;
                        borrowBtn.innerHTML = '<i class="fas fa-lock"></i> 已借出';
                        borrowBtn.style.background = '#95a5a6';
                        borrowBtn.style.cursor = 'not-allowed';
                    } else {
                        borrowBtn.disabled = false;
                        borrowBtn.innerHTML = '<i class="fas fa-bookmark"></i> 借阅图书';
                        borrowBtn.style.background = 'var(--primary)';
                        borrowBtn.style.cursor = 'pointer';
                    }
                }
            }
        }
        
        // 更新借阅记录显示
        function updateBorrowedBooksDisplay() {
            const borrowedBooksList = document.getElementById('borrowed-books-list');
            const emptyState = document.getElementById('empty-borrowed');
            
            // 清空现有借阅记录
            while (borrowedBooksList.firstChild) {
                borrowedBooksList.removeChild(borrowedBooksList.firstChild);
            }
            
            // 如果没有借阅记录，显示空状态
            if (borrowedBooks.length === 0) {
                if (emptyState) {
                    emptyState.style.display = 'block';
                }
                return;
            }
            
            // 显示借阅记录
            if (emptyState) {
                emptyState.style.display = 'none';
            }
            
            // 添加每条借阅记录
            borrowedBooks.forEach(book => {
                const bookInfo = getBookInfo(book.title);
                if (bookInfo) {
                    addBorrowedBook(bookInfo, book.returnDate);
                }
            });
        }
        
        // 更新空状态可见性
        function updateEmptyStateVisibility() {
            const borrowedBooksList = document.getElementById('borrowed-books-list');
            const emptyState = document.getElementById('empty-borrowed');
            
            if (borrowedBooksList.children.length === 0) {
                emptyState.style.display = 'block';
            }
        }
        
        // 为借阅按钮添加事件监听
        function setupBorrowButtons() {
            const borrowButtons = document.querySelectorAll('.borrow-btn');
            borrowButtons.forEach(button => {
                button.addEventListener('click', function() {
                    const bookTitle = this.getAttribute('data-title');
                    const bookAuthor = this.getAttribute('data-author');
                    borrowBook(bookTitle, bookAuthor);
                });
            });
        }
        
        // 页面加载时初始化
        window.onload = function() {
            initDates();
            setupBorrowButtons();
            
            // 添加CSS动画
            const style = document.createElement('style');
            style.textContent = `
                @keyframes fadeIn {
                    from { opacity: 0; transform: translateY(-20px); }
                    to { opacity: 1; transform: translateY(0); }
                }
                @keyframes fadeOut {
                    from { opacity: 1; transform: translateY(0); }
                    to { opacity: 0; transform: translateY(-20px); }
                }
                .notification {
                    animation: fadeIn 0.3s, fadeOut 0.3s 2.7s;
                }
            `;
            document.head.appendChild(style);
        };
    </script>
</body>
</html>